<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head th:include="_header_include::frag(~{::title},~{},~{})">
    <title>消息中心</title>
</head>

<body>
<div id="addDialog" class="mainPadding" style="display: none;">
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>消息中心</el-breadcrumb-item>
    </el-breadcrumb>
    <template>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="业务消息" name="business" ref="business" >
                <el-row class="marginB20">
                    <el-button type="success" @click="changeBussState">标记已读</el-button>
                </el-row>
                <div class="mainSearchBg">        
                    <div class="mainSearchFormBox">
                        <el-form :inline="true" :model="businessForm" class="demo-form-inline mainSearchForm">
                            <el-form-item label="消息内容:" label-width="55px">
                                <el-input v-model="businessForm.content" placeholder="消息内容"></el-input></el-form-item>
                            <el-form-item label="请选择:" label-width="84px">
                                <el-select v-model="businessForm.status" placeholder="请选择" width="100">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="接收时间:" label-width="84px">
                                <el-date-picker v-model="businessForm.date1" type="datetime" placeholder="选择日期时间"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="—" class="widthauto" style="margin-right: 10px;">   
                                <el-date-picker v-model="businessForm.date2" type="datetime" placeholder="选择日期时间"></el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <el-button icon="el-icon-search" type="primary" @click="onBussSubmit">搜索</el-button>
                            </el-form-item>
                        </el-form>
                    </div>                    
                    <el-table :data="businessData" border  @selection-change="handleSelectionChange" @row-dblclick="showBussMx" tooltip-effect="light" >
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column property="title" stripe label="标题" width="150"  show-overflow-tooltip  align="center"> <!--:formatter="formatTitle"-->
                            <template slot-scope="scope">
                                <span class="span"  style="white-space: nowrap"  v-if="scope.row.status==0"><li class="tip"></li>{{ scope.row.title }}</span>
                                <span class="span" style="color: #cccccc;white-space: nowrap;" v-else><li class="tip1"></li>{{ scope.row.title }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column property="content" label="消息内容" show-overflow-tooltip align="center">
                            <template slot-scope="scope">
                                <span  style="white-space: nowrap" v-if="scope.row.status==0">{{ scope.row.content }}</span>
                                <span style="color: #cccccc;white-space: nowrap;" v-else>{{ scope.row.content }}</span>
                            </template>
                        </el-table-column> <!--:formatter="formatContent"-->
                        <el-table-column property="receiveTime" label="接收时间"  width="200" align="center"></el-table-column>
                        <el-table-column property="status" label="消息状态" :formatter="formatStatus" align="center"></el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange"
                                   background @current-change="handleCurrentChange"
                                   :current-page="currentPage" :page-sizes="[20, 50, 100]"
                                   :page-size="pageSize"
                                   layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="公告通知"  name="announcement"  ref="announcement">
                <el-row class="marginB20">
                    <el-button type="success" @click="changeAnnState">标记已读</el-button>
                </el-row>
                <div class="mainSearchBg">        
                    <div class="mainSearchFormBox">
                        <el-form :inline="true" :model="annForm" class="demo-form-inline mainSearchForm">
                            <el-form-item label="消息内容:" label-width="55px">
                                <el-input v-model="annForm.content" placeholder="消息内容"></el-input>
                            </el-form-item>
                            <el-form-item label="请选择:" label-width="84px">
                                <el-select v-model="annForm.status" placeholder="请选择" width="100">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="接收时间:" label-width="84px">
                                <el-date-picker v-model="annForm.date1" type="datetime" placeholder="选择日期时间"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="—" class="widthauto" style="margin-right: 10px;">
                                <el-date-picker v-model="annForm.date2" type="datetime" placeholder="选择日期时间"></el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <el-button icon="el-icon-search" type="primary" @click="onAnnSubmit">搜索</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <el-table :data="annData" border style=""  @selection-change="handleSelectionChange"  @row-dblclick="showAnnMx"  tooltip-effect="light"  :cell-style="cellStyle">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column property="title" label="标题" width="200" show-overflow-tooltip align="center">
                            <template slot-scope="scope">
                                <span class="span" style="white-space: nowrap"  v-if="scope.row.status==0"><li class="tip"></li>{{ scope.row.title }}</span>
                                <span class="span" style="color: #cccccc;white-space: nowrap" v-else><li class="tip1"></li>{{ scope.row.title }}</span>
                            </template>
                        </el-table-column>  <!--:formatter="formatTitle"-->
                        <el-table-column property="content" label="消息内容"  show-overflow-tooltip align="center">
                            <template slot-scope="scope">
                                <span style="white-space: nowrap" v-if="scope.row.status==0">{{scope.row.content }}</span>
                                <span style="color: #cccccc;white-space: nowrap;" v-else>{{ scope.row.content }}</span>
                            </template>
                        </el-table-column>  <!--:formatter="formatContent"-->
                        <el-table-column property="receiveTime" label="接收时间" width="200" align="center"></el-table-column>
                        <el-table-column property="status" label="消息状态"  :formatter="formatStatus" align="center"></el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[ 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>
    </template>
</div>
<style>
</style>
<div id="anndialog">
    <el-dialog
            title="详细信息"
            :visible.sync="anndialogVisible" width="60%"  :before-close="handleClose"  >
        <template>
            <el-table :data="AnnDialogTableData" style="width: 100%" >
                <template v-for="(col ,index) in cols">
                    <el-table-column :prop="col.prop" :label="col.label" header-align="center" >
                        <template slot-scope="scope">
                            <span style="white-space: pre-wrap">{{scope.row.content_ }}</span>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
        </template>
    </el-dialog>
</div>

<div id="bussdialog">
    <el-dialog
            title="详细信息"
            :visible.sync="bussdialogVisible" width="60%">
        <template>
            <el-table :data="bussDialogTableData" style="width: 100%">
            <template v-for="(col ,index) in cols">
                <el-table-column :prop="col.prop" :label="col.label" header-align="center">
                    <template slot-scope="scope">
                         <span style="white-space: pre-wrap">{{scope.row.content_ }}</span>
                    </template>
                </el-table-column>
            </template>
            </el-table>
            <span slot="footer" class="dialog-footer" >
                <el-button type="primary" @click="updateStatusBuss">我知道了</el-button>
            </span>
        </template>
    </el-dialog>
</div>


<style>
    .span {
        position:relative;
        padding:5px;
    }
    .tip {
        display:block;
        background:#f00;
        border-radius:50%;
        width:12px;
        height:12px;
        top:10px;left:-10px;
        position:absolute;
    }
    .tip1 {
        display:block;
        background:#cccccc;
        border-radius:50%;
        width:12px;
        height:12px;
        top:10px;
        left:-10px;
        position:absolute;
    }
    .el-dialog__body{
        padding-top: 3px;
    }
    .el-dialog__footer {
        text-align: center;
    }
    /*.el-table th {
        font-weight: bolder;
    }*/
     .el-tooltip__popper {
         max-width: 60%;
         line-height: 130%;
         margin-left: 2%;
     }
</style>
<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>

<script>
    var annDialogVm = new Vue({
        el: '#anndialog',
        data:{
            anndialogVisible:false,
            id:"",
            status:"",
            title:"",
            content:"",
            flag:1,
            AnnDialogTableData:[],
            cols: []
        },
        methods:{
            handleClose(done){
                if(annDialogVm.status==1){
                    done();
                    return false;
                }
                var param = {};
                if(annDialogVm.flag!=1){
                    return false;
                }else{
                    annDialogVm.flag  = 0;
                }
                param.ids = annDialogVm.id;
                axios.post('/annReceive/batchUpdate', param)
                    .then(function (response) {
                        vm.$message({type: 'success', message: '公告已读!',duration:2000,onClose:function(){
                            done();
                            vm.initAnnTableData(1);
                            annDialogVm.flag  = 1;
                        }});
                    })
                    .catch(function (error) {
                        queryFormVM.$message.error(error);
                        console.log(error);
                    });
            },
            initDialogData(){
            },
            showOutVisiable:function(){
                this.dialogVisible = true
            }
        },
        created() {
        },
        updated() {
            // this.initDialogData()
        },
    });

    var bussDialogVm = new Vue({
        el: '#bussdialog',
        data:{
            bussdialogVisible:false,
            id:"",
            status:"",
            title:"",
            content:"",
            bussDialogTableData:[],
            cols: []
        },
        methods:{
            initDialogData(){
                // document.getElementById("bussTitle").innerHTML=this.title;
                // document.getElementById("bussBody").innerHTML=this.content;
            },
            updateStatusBuss(){
                if(bussDialogVm.status==1){
                    bussDialogVm.bussdialogVisible = false
                    return false;
                }
                var param = {};
                param.ids = bussDialogVm.id;
                axios.post('/bussReceive/batchUpdate', param)
                    .then(function (response) {
                        bussDialogVm.$message({type: 'success', message: '消息已读!',duration:2000,onClose:function(){
                                bussDialogVm.bussdialogVisible = false
                                vm.initBussTableData(1);
                            }});
                    }).catch(function (error) {queryFormVM.$message.error(error);});
            },
            showOutVisiable:function(){
                this.bussdialogVisible = true
            }
        },
        created() {
        },
        updated() {
            this.initDialogData()
        },
    });
</script>


<script>
    var vm = new Vue({
        el:"#addDialog",
        data:{
            activeName: 'business',
            businessForm:{
                content:"",
                status:"0",
                date1:"",
                date2:""
            },
            annForm:{
                content:"",
                status:"0",
                time:"",
                date1:"",
                date2:""
            },
            businessData: [],
            annData: [],
            falg:0,
            multipleSelection:[],
            currentPage: 1,
            total: 0,
            pageNum: 1,
            pageSize: 20,

            options: [{
                value: '-1',
                label: '全部'
            }, {
                value: '0',
                label: '未读'
            }, {
                value: '1',
                label: '已读'
            }],

        },
        methods: {
            cellStyle(row, column, rowIndex, columnIndex){
                if(row.column.label === "消息内容"){
                    // return 'font-weight:bold'
                     return 'white-space: nowrap'
                }else{
                    return ''
                }
            },
            showAnnMx(row, event){
                annDialogVm.id = row.id;
                annDialogVm.title = row.title;
                annDialogVm.content = row.content;
                annDialogVm.status = row.status;
                annDialogVm.AnnDialogTableData = [{content_:row.content}]
                annDialogVm.cols =[{ label: row.title, prop: "content_", type: "normal" }];
                annDialogVm.anndialogVisible = true;
            },

            showBussMx(row, event){
                bussDialogVm.id = row.id;
                bussDialogVm.title = row.title;
                bussDialogVm.content = row.content;
                bussDialogVm.status = row.status;
                bussDialogVm.bussDialogTableData = [{content_:row.content}]
                bussDialogVm.cols =[{ label: row.title, prop: "content_", type: "normal" }];
                bussDialogVm.bussdialogVisible = true;
            },
            onAnnSubmit(){
                var param = this.annForm;
                param.pageSize =  this.pageSize;
                param.pageNum = this.pageNum;
                console.log(param)
                axios.post("/annReceive/list", param)
                    .then(function (response) {

                        if(response.data.code==-1){
                            vm.$message.error(response.data.msg)
                            return false ;
                        }

                        var data = response.data.data
                        vm.annData = data.data;
                        console.log(vm.businessData)
                        vm.total = data.total;
                        vm.currentPage = data.currentPage;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
                    .then(function () {
                    });
            },
            changeAnnState(){
                var rows = this.multipleSelection;
                if(rows.length<1){
                    this.$message({type:"warning",message:"请选择消息"})
                }else {
                    var rowIds = [];
                    for (var i = 0; i < rows.length; i++) {
                        rowIds.push(rows[i].id)
                    }
                    //调用后台数据删除操作。
                    var param = {};
                    param.ids = rowIds.join(",");
                    axios.post('/annReceive/batchUpdate', param)
                        .then(function (response) {
                            vm.$message({type: 'success', message: '更新完成!',duration:2000,onClose:function(){
                                    vm.initAnnTableData(1);}});
                        })
                        .catch(function (error) {
                            queryFormVM.$message.error(error);
                            console.log(error);
                        });
                }
            },
            onBussSubmit(){
                var param = this.businessForm;
                param.pageSize =  this.pageSize;
                param.pageNum = this.pageNum;
                console.log(param)
                axios.post("/bussReceive/list", param)
                .then(function (response) {
                    if(response.data.code==-1){
                        vm.$message.error(response.data.msg)
                        return false ;
                    }

                    var data = response.data.data
                    vm.businessData = data.data;
                    console.log(vm.businessData)
                    vm.total = data.total;
                    vm.currentPage = data.currentPage;
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                });
            },
            changeBussState(){
                var rows = this.multipleSelection;
                if(rows.length<1){
                    this.$message({type:"warning",message:"请选择消息"})
                }else{
                    var rowIds = [];
                    for(var i=0;i<rows.length;i++){
                        rowIds.push(rows[i].id)
                    }
                    //调用后台数据删除操作。
                    var param={};
                    param.ids = rowIds.join(",");
                    axios.post('/bussReceive/batchUpdate', param)
                        .then(function (response) {
                            vm.$message({type: 'success', message: '更新完成!',duration:2000,onClose:function(){
                                    vm.initBussTableData(1);
                                }});
                        })
                        .catch(function (error) {
                            queryFormVM.$message.error(error);
                            console.log(error);
                        });
                }
            },
            handleSelectionChange(val) {
                console.info(val);
                this.multipleSelection = val;
            },
            formatStatus(row, column){
                return row.status == 0 ? "未读" : "已读";
            },
            formatTitle(row,column){
               return row.status == 0? "<span class='span'> <i class=\"tip\"></i> "+row.title+"</span>" : "<span class='span'><i class=\"tip1\"></i> "+row.title+"</span>"
            },
            handleClick(tab, event) {
                console.log(tab, event);
                // console.log(tab.name)
                // tab.label="babbababab"
                if(tab.name=="announcement"){
                    console.log("------------------announcement-----------------------")
                    this.initAnnTableData(1,20);
                }else{//business
                    console.log("------------------business-----------------------")
                    this.initBussTableData(1,20);
                }
            },
            handleSizeChange(val) {
                //下拉框  每页 10,20条切换 调用
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                if(this.activeName=="business"){
                    this.initBussTableData(1);
                }else{
                    this.initAnnTableData(1);
                }

            },
            handleCurrentChange(val) {
                //点击 页码
                console.log(`当前页: ${val}`);
                if(this.activeName=="business"){
                    this.initBussTableData(val);
                }else{
                    this.initAnnTableData(val);
                }
            },
            initBussTableData(v_pageNum,v_pageSize) {
                var param = this.businessForm;
                if(v_pageSize){
                    param.pageSize =  v_pageSize
                }else{
                    param.pageSize =  this.pageSize;
                }

                param.pageNum = v_pageNum;
                console.log(param)
                axios.post("/bussReceive/list", param)
                    .then(function (response) {
                        if(response.data.code==0){
                            var data = response.data.data
                            vm.businessData = data.data;
                            if(data.data.length>0){
                                vm.total = data.total;
                                vm.pageSize = data.pageSize;
                                vm.currentPage = data.currentPage;
                            }else{
                                vm.total = 0;
                                vm.pageSize = 20;
                                vm.currentPage = 0;
                            }
                        }
                    })
                    .catch(function (error) {
                    }).then(function () {
                    });
            },
            initAnnTableData(v_pageNum,v_pageSize) {
                var param = this.annForm;
                if(v_pageSize){
                    param.pageSize =  v_pageSize
                }else{
                    param.pageSize =  this.pageSize;
                }
                param.pageNum = v_pageNum;

                console.log(param)
                axios.post("/annReceive/list", param)
                    .then(function (response) {
                        if(response.data.code==0) {
                            var data = response.data.data
                            vm.annData = data.data;
                            if(data.data.length>0) {
                                vm.total = data.total;
                                vm.pageSize = data.pageSize;
                                vm.currentPage = data.currentPage;
                            }else{
                                vm.total = 0;
                                vm.pageSize = 20;
                                vm.currentPage = 0;
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
                    .then(function () {
                    });
            }
        },
        created() {
            console.info("create method");
            this.initBussTableData(1);
            this.initAnnTableData(1);
        },
        mounted() {
            console.info("mounted method");
        },
        updated(){
            //vm.businessData.length==0&&
            if(vm.falg==0){
                vm.falg=1;
                setTimeout(function(){
                    if(vm.businessData.length==0&&vm.annData.length!=0){
                        vm.activeName='announcement';
                        vm.initAnnTableData(1,20);
                    }else{
                        vm.activeName='business';
                        vm.initBussTableData(1,20);
                    }
                },1000);
            }
            console.info("updated method");
            var param = {};
            axios.post("/annReceive/unreadCount", param).then(function (response) {
                var data = response.data.data
                var str ="";
                if(data&&data!=0){
                    str = "("+data+")"
                }
                document.getElementById("tab-announcement").innerHTML =  "公告通知<span style='color: red'>"+str+"</span>";
            })
            axios.post("/bussReceive/unreadCount", param).then(function (response) {
                var data = response.data.data
                var str ="";
                if(data&&data!=0){
                    str = "("+data+")"
                }
                document.getElementById("tab-business").innerHTML =  "业务消息<span style='color: red'>"+str+"</span>";
            })
             window.parent.homePageVM.messageCount()
        },//created方法 结束
        mounted(){
            document.getElementById('addDialog').style.display = 'block';
        }
    });

</script>
</body>
</html>